import React from "react";
import { container, IModeRegistry, ModeFeature } from "../types";

export function registerModes() {
    console.log("Starting mode registration...");
    const modeRegistry = container.get<IModeRegistry>("IModeRegistry");
    console.log("ModeRegistry instance:", modeRegistry);

    // 2D编辑模式
    const mode2D: ModeFeature = {
        toolbarItems: [
            { id: "select", label: "选择", action: () => {} },
            { id: "rectangle", label: "矩形", action: () => {} },
            { id: "circle", label: "圆形", action: () => {} },
            { id: "text", label: "文本", action: () => {} },
        ],
        leftPanelItems: [
            { id: "layers", title: "图层", content: <div>图层内容</div> },
            { id: "assets", title: "资源", content: <div>资源内容</div> },
        ],
        rightPanelItems: [
            { id: "properties", title: "属性", content: <div>属性内容</div> },
            { id: "styles", title: "样式", content: <div>样式内容</div> },
        ],
        view: <div className="canvas-2d">2D编辑区域</div>,
        message: "2D编辑器状态信息",
    };

    // 交互编辑模式
    const modeInteractive: ModeFeature = {
        toolbarItems: [
            { id: "select", label: "选择", action: () => {} },
            { id: "button", label: "按钮", action: () => {} },
            { id: "input", label: "输入框", action: () => {} },
            { id: "link", label: "链接", action: () => {} },
        ],
        leftPanelItems: [
            { id: "components", title: "组件", content: <div>组件内容</div> },
            { id: "interactions", title: "交互", content: <div>交互内容</div> },
        ],
        rightPanelItems: [
            { id: "properties", title: "属性", content: <div>属性内容</div> },
            { id: "events", title: "事件", content: <div>事件内容</div> },
        ],
        view: <div className="canvas-interactive">交互编辑区域</div>,
        message: "交互编辑器状态信息",
    };

    // 预览模式
    const modePreview: ModeFeature = {
        toolbarItems: [],
        leftPanelItems: [],
        rightPanelItems: [],
        view: <div className="canvas-preview">预览区域</div>,
        message: "预览状态信息",
    };

    // 注册模式
    console.log("Registering 2D mode...");
    modeRegistry.registerMode("2d", mode2D);
    console.log("Registering interactive mode...");
    modeRegistry.registerMode("interactive", modeInteractive);
    console.log("Registering preview mode...");
    modeRegistry.registerMode("preview", modePreview);
    console.log("Mode registration completed.");
}
